<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			#level {
				margin-top: 45px;
				text-align: center;
			}
			#level div{
				margin-top: 5px;
			}
		</style>
	</head>

	<body>
		<!-- 主界面不动、菜单移动 -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left" id="offCanvasSide">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->

					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav" style="background-color: #23CAD0;">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
					<h1 class="mui-title" style="color: white;font-size: 24px;">袋鼠捎货</h1>
				</header>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="mui-bar mui-bar-nav">
							<a class="mui-icon" ><img src="img/slrbank.png" style="width: 60%" /></a>
							<h1 class="mui-title">更换手机号</h1>
						</div>
						<div class="container " id="level">
							<div class="mui-row" >
								<div class="mui-col-xs-4">
									<div><span style="color: #84B9BE;">验证身份</span></div>									
									<div class="mui-row">
										<div class="mui-col-xs-11" style="border: 5px;background-color: #5BA3AA;height:5px;border-radius:50px"></div>
										<div class="mui-col-xs-1" style="top:-10px;left:-4px;z-index:1"><img src="img/slrbutton.png" style="width: 20px;" /></div>
									</div>										
								</div>
								<div class="mui-col-xs-4">
									<div><span>绑定新手机号</span></div>
									<div class="mui-row">
										<div class="mui-col-xs-11" style="border: 5px;background-color: #5F5655;height:5px;border-radius:50px"></div>
										<div class="mui-col-xs-1" style="top:-10px;left:-4px;z-index:1"><img src="img/slrbutton.png" style="width: 20px;" /></div>
									</div>
								</div>
								<div class="mui-col-xs-4">
									<div><span>完成</span></div>
									<div class="mui-row">
										<div class="mui-col-xs-11" style="border: 5px;background-color: #5F5655;height:5px;border-radius:50px"></div>
										<div class="mui-col-xs-1" style="top:-10px;left:-4px;z-index:1"><img src="img/slrbutton.png" style="width: 20px;" /></div>
									</div>
								</div>
							</div>
						</div>
						<div class="container" style="margin-top: 10px;padding-left:20px ;">
							<div class="mui-row">
								<div class="mui-col-xs-8">
									<input type="text"  disabled="disabled" placeholder="136****456"  />
								</div>								
								<div class="mui-col-xs-3" style="margin-left:2%;">
									<button type="button" class="mui-btn mui-btn-outlined" style="color: #23CAD0;border-color: #23CAD0;margin-top: 6%;">获取验证码</button>
								</div>
							</div>
						</div>
						
						<div>
							<input type="text" placeholder="请输入手机短信验证码" style="margin-left:5%;width: 92%;" />
						</div>
						<div>
							<button type="button" class="mui-btn" style="font-size: 20px;margin-left:5%;width: 92%;color: white;border-color: #23CAD0;background-color: #23CAD0;">验证</button>
						</div>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
	</body>

</html>